<template>





  <div>

    <div>
      <el-form :inline="true"  size="mini">
        <el-form-item label="名称：">
          <el-input v-model.trim="pagess1.rname"></el-input>
        </el-form-item>
        <el-form-item label="状态:" >
          <el-select v-model="pagess1.statusId" class="auto-width" clearable filterable placeholder="状态" style="width: 85px">
            <el-option value="0" label="正常">正常</el-option>
            <el-option value="1"  label="禁用">禁用</el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button icon='el-icon-search' type="primary" @click="handleCheck">查询</el-button>
          <el-button icon='el-icon-refresh' class="filter-item" @click="handleReset">重置</el-button>
          <el-button  type="primary" icon="el-icon-circle-plus-outline" size="mini" @click="handleAdd()">添加</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-dialog
        width="30%"
        :title="title"
        :visible.sync="visible">
        <el-form ref="formData" :model="formData" :rules="rules" label-width="100px">
          <el-form-item label="名称：" prop="rname">
            <el-input v-model="formData.rname"></el-input>
          </el-form-item>
          <el-form-item label="备注：" prop="remark">
            <el-input type="textarea"  placeholder="请输入内容" v-model="formData.remark">
            </el-input>
          </el-form-item>
        </el-form>
        <el-row style="margin-top:17px;">
          <el-button style="float:right;margin-left:6px;" size="mini" type="danger" plain @click="visible=false">取 消</el-button>
          <el-button style="float:right" size="mini" type="primary"  @click="submitForm('formData')">确 定</el-button>
        </el-row>
      </el-dialog>
    </div>

    <!--修改form-->
    <div>
      <el-dialog
        width="30%"
        :title="title"
        :visible.sync="formxiugai">
        <el-form ref="formData" :model="formDataxg" :rules="rules" label-width="100px">
          <el-form-item label="名称：" prop="rname">
            <el-input v-model="formDataxg.rname"></el-input>
          </el-form-item>
          <el-form-item label="备注：" prop="remark">
            <el-input type="textarea"  placeholder="请输入内容" v-model="formDataxg.remark">
            </el-input>
          </el-form-item>
        </el-form>
        <el-row style="margin-top:17px;">
          <el-button style="float:right;margin-left:6px;" size="mini" type="danger" plain @click="formxiugai=false">取 消</el-button>
          <el-button style="float:right" size="mini" type="primary" @click="submitFormxg('formDataxg')">确 定</el-button>
        </el-row>
      </el-dialog>
    </div>


    <!--分配权限-->
    <el-dialog
      title="修改权限"
      :visible.sync="dialogVisibleqx"
      width="30%"
     >
      <span>
         <el-tree
           ref="tree"
           :data="treeData"
           show-checkbox
           node-key="mid"
           default-expand-all
           :props="defaultProps">
        </el-tree>
      </span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleqx = false">取 消</el-button>
    <el-button type="primary" @click="updQuanxan()">确 定</el-button>
  </span>
    </el-dialog>





    <el-table
      :data="tableData"
      style="width: 100%"
      :row-class-name="tableRowClassName">

      <el-table-column
        prop="rid"
        label="序号">
      </el-table-column>

      <el-table-column
        prop="rname"
        label="名称">
      </el-table-column>

      <el-table-column
        prop="rstatus"
        label="状态">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.rstatus"
            @change="handleChangeStatus(scope.row.rid, scope.row.rstatus)"
            :active-value="1"
            :inactive-value="0"
            active-color="#ff4949"
            inactive-color="#13ce66"
            active-text="禁用"
            inactive-text="正常">
          </el-switch>
        </template>

      </el-table-column>

      <el-table-column
        prop="remark"
        label="备注">
      </el-table-column>

      <el-table-column
        prop="cz"
        label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" round plain  @click="del(scope.row.rid)" :disabled="scope.row.rstatus==1">删除</el-button>
          <el-button size="mini" type="primary" round plain  @click="handleEdit(scope.row)" :disabled="scope.row.rstatus==1">修改</el-button>
          <el-button size="mini" type="primary" round plain  @click="handlesz(scope.row.rid)" :disabled="scope.row.rstatus==1">设置权限</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange1"
      @current-change="handleCurrentChange1"
      :current-page="pagess1.currentPage"
      :page-sizes="[2, 4, 6, 8,10]"
      :page-size="pagess1.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagess1.total">
    </el-pagination>

  </div>
</template>

<script>
  import qs from 'qs'
  export default {
    created(){
      this.query();
    },
    methods: {
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      handleCurrentChange1(val){
        this.pagess1.currentPage=val;
        this.query();
      }
      ,handleSizeChange1(val){
        this.pagess1.pagesize=val;
        this.query();
      },
      handleChangeStatus(rid,rstatus){
        const title = { 1: '禁用', 0: '启用' }
        this.$confirm(`确定要${title[rstatus]}吗?`, {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.get("education-system-roles/demo/t-role/updRoleById?rid="+rid+"&rstatus="+rstatus).then(r=>{
            if(r.data.obj==1){
                this.$message.success("修改成功");
                this.query();
            }

          })
        }).catch(() => {
          this.query();
        })
      },

      //主页面查询
      query(){
        this.$axios.post("education-system-roles/demo/t-role/queryRole",qs.stringify(this.pagess1)).then(r=>{
          this.tableData=r.data.obj.records;
          this.pagess1.total=r.data.obj.total;
        });
      },
      //模糊查询
      handleCheck(){
        this.pagess1.currentPage=1;
        //alert(JSON.stringify(this.pagess1.statusId))
        this.query();
      },
      //重置按钮
      handleReset(){
        this.pagess1.rname='';
      },

      //打开添加的弹框
      handleAdd(){
        this.visible=true;
      },
      //添加的确认
      submitForm(formData){
        if(this.formData.rname!=''){
          this.$axios.post("education-system-roles/demo/t-role/insetRole",qs.stringify(this.formData)).then(r=>{
            //alert(JSON.stringify(r.data))
            if(r.data.obj==1){
              this.$message.success("添加成功");
              this.visible=false;
              this.query();
              this.formData={rname:'', remark:''};
            }else {
              this.$message.info("添加失败,名字不能重复哦！");
            }
          })
        }else {
          this.$message.info("不能为空哦！！");
        }

      },
      //修改
      handleEdit(obj){
        this.formxiugai=true;
        this.formDataxg=obj;
      },
      submitFormxg(formDataxg){
        if(this.formDataxg.rname!='') {
          this.$axios.post("education-system-roles/demo/t-role/updRole", qs.stringify(this.formDataxg)).then(r => {
            alert(JSON.stringify(r.data))
            this.formxiugai = false;
            this.query();
          })
        }else{
          this.$message.error("输入框不能为空哦！！");
        }
      },

      //展示权限
     async handlesz(rid){
        this.roles.rid=rid;
        this.dialogVisibleqx=true;
        await this.$axios.get("education-system-roles/demo/t-premission/findAll").then(r=>{
          //alert(JSON.stringify(r.data))
          this.treeData=r.data.obj;
        }),
       this.$axios.get("education-system-roles/demo/t-role-permissions/UserByIdandRole?rid="+rid).then(r=>{
         //alert(JSON.stringify(r.data))
         r.data.obj.forEach(item=>{
           this.$nextTick(()=> {
             //选中
             this.$refs.tree.setChecked(item.pid,true,false);
           })
         })
       })
      },
        //分配权限
      updQuanxan(){
        let all=this.$refs.tree.getCheckedNodes(false,true);
        //alert(JSON.stringify(all))
        let per=[];
        all.forEach(item=>{
          per.push(item.mid)
        })
        this.roles.mids=per.join(",");
        this.$axios.post("education-system-roles/demo/t-role-permissions/updByRid",qs.stringify(this.roles)).then(r=>{
            if(r.data.obj){
              this.dialogVisibleqx=false;
            }
        })
      },
      //逻辑删除
      del(rid){
          this.$confirm('确认删除吗？')
            .then(() => {
              this.$axios.get("education-system-roles/demo/t-role/del?rid="+rid).then(r=>{
              if(r.data.obj==1){
                this.$message.success("删除成功");
                this.query();
              }

              });
            }).catch(() => {
            this.$message.success("删除失败");
            this.query();
          });


      },


    },
    data() {
      return {
        // disables:false,
        roles:{
          rid:'',
          mids:'',
        },

        treeData:[],
        defaultProps: {
          children: 'getMeun',
          label: 'mname'
        },
        dialogVisibleqx:false,
        rules: {
          rname: [
            { required: true, message: '请输入名称', trigger: 'blur' }
          ],
          remark: [
            { required: true, message: '请输入备注', trigger: 'blur' }
          ]
        },
        formxiugai:false,
        visible:false,
        map: {},
        formData:{
          rname:'',
          remark:'',
        },
        formDataxg:{
          rname:'',
          remark:'',
          rid:'',
        },
        tableData: [],
        pagess1:{
          currentPage:1,
          pagesize:2,
          total:0,
          rname:'',
          statusId:'',
        },
      }
    }
  }
</script>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
  .el-pagination{
    text-align: center;
  }
</style>
